<template>
  <div class="ProductContent">
    <!-- 头标Start -->

    <div class="banner">
      <div class="wh-1200 auto pl-10">
        <p class="banner_text">产品供应量</p>
        <div class="banner_box">
          <countTo class="banner_box_num" :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
        </div>
      </div>
    </div>
    <!-- 头标End -->
    <!-- 面包屑Start -->
    <breadcrumb SecondcrumbsUrl="/ProductProvide" :ThreecrumbsTitle="detail.productName" SecondcrumbsTitle="产品供应"></breadcrumb>
    <!-- <nav class="w">
      <div class="nav-box">
        <a-breadcrumb separator=">" class="nav-text">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>产品供应</a-breadcrumb-item>
          <a-breadcrumb-item><a href="#" class="nav-Detail">{{detail.productName}}</a></a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </nav> -->
    <!-- 面包屑End -->

    <div class="w mainBox">
      <!-- left -->
      <div class="leftBox" ref="baseInfo">
        <div class="carousel_wrap" id="carousel">
          <transition-group tag="ul" class='slide-ul' name="list">
            <li v-for="(list,index) in productPicture" :key="'s'+index" v-show="index===currentIndex" @mouseenter="stop">
              <a :href="list.clickUrl">
                <img v-image-preview :src="wengeGetImageUrl(list.fileUrl)" :alt="list.desc" style="width: 360px;height:360px">
              </a>
            </li>
          </transition-group>

          <div class="flex scroll_view_box carousel_items">
            <a-icon type="left" class="icon1" @click="lastPicture(currentIndex*1-1)" />
            <a v-for="(item,index) in productPicture" :key="index"><img :src="wengeGetImageUrl(item.fileUrl)" alt="" class="lunbo" :class="{'active':index===currentIndex}" @click="change(index)"></a>
            <a-icon type="right" class="icon1" @click="nextPicture(currentIndex*1+1)" />
          </div>
        </div>

        <div class="info">
          <div class="info_son">
            <div class="provide">{{detail.productName}}</div>
            <div class="price mt-10"><span class="price_one">价&nbsp;&nbsp; 格：</span>

              <span class="price_two" v-if="detail.isInterview == 1">面谈 </span>
              <span class="price_two" v-else>￥{{detail.price}} </span>
            </div>
            <div class="titleList">
              <span class="titleLabel">同义名称：</span>
              <span class="titleValue">{{ detail.productSynonymName }}</span>
            </div>
            <div class="titleList">
              <span class="titleLabel">产品类别：</span>
              <span class="titleValue" :title="detail.productOneCategoryName+'-'+detail.productSecondCategoryName">{{ detail.productOneCategoryName? detail.productOneCategoryName : '' }}-{{ detail.productSecondCategoryName?detail.productSecondCategoryName:'' }}</span>
            </div>
            <div class="titleList">
              <span class="titleLabel">上市日期：</span>
              <span class="titleValue">{{ detail.publishDate }}</span>
            </div>
            <div class="titleList">
              <template>
                <span class="titleLabel">供应上限：</span>
                <span class="titleValue">{{detail.productIslimited == 1?'不限':detail.productCeiling}}</span>
              </template>
            </div>
            <div class="titleList">
              <template>
                <span class="titleLabel">对接量：</span>
                <span class="titleValue">{{detail.messageCount ? detail.messageCount : '暂无'}}</span>
              </template>
            </div>
            <div class="btnArr" v-if="detail.productTagName">
              <p class="machine">{{detail.productTagName}}</p>
            </div>
            <div style="margin-bottom: 32px" v-else>
              <!-- <p class="machine" style="opacity:0"></p> -->
            </div>
          </div>
          <div class="btn_list">
            <div class="btn" v-show="!isMyProduct" @click="toProcure">在线采购</div>
            <div class="scroll_view_right" v-show="!isMyProduct" @click="attentionEnt">
              <i v-if="ISguanzhu" class="iconfont icon-guanzhuon" style="color: red">已关注（<span>{{ EntZZSNum }}</span>）</i>
              <i v-else class="iconfont icon-guanzhu">关注（<span>{{ EntZZSNum }}</span>）</i>
            </div>
          </div>
        </div>
      </div>
      <!-- 供应企业信息Start -->
      <div class="main-right f-right" ref="lineInfo">
        <div class="right-top">
          <div class="expire">供应企业信息</div>
          <div class="company clearfix">
            <div class="f-left">{{entList.entName}}</div>
            <div class="f-right" v-if="entList.entLogo"><img style="width: 73px;height: 79px;" :src="wengeGetImageUrl(entList.entLogo)" alt=""></div>
            <img v-else style="width: 73px;height: 79px;" src="@/assets/images/defult_img.png" alt />
            <div class="f-right"><img src="" alt=""></div>
          </div>
          <div class="CompanyInformation">
            <ul>
              <li>
                <!-- 网址：<span>{{entList.webAddress?entList.webAddress:'/'}}</span> -->
                网址：<a :href="entList.webAddress" style="color: #606266" target="_blank">
                  {{ entList.webAddress ? entList.webAddress : "暂无" }}
                </a>
              </li>
              <li style="margin: 10px 0">
                联系人：<span>{{detail.contacts?detail.contacts:'暂无'}}</span>
              </li>
              <li>
                手机号码：<span>{{detail.phone?detail.phone:'暂无'}}</span>
              </li>
              <li style="margin: 10px 0">
                邮箱：<span>{{detail.email?detail.email:'暂无'}}</span>
              </li>
              <li>
                地址：<span>{{entList.entAddress?entList.entAddress:'暂无'}}</span>
              </li>
            </ul>
          </div>
        </div>
        <a-button type="primary" block @click="Myneed">我要发布需求</a-button>
        <a-button type="primary" block @click="Myproduct">我要发布产品</a-button>
      </div>
    </div>
    <!-- 详情 -->
    <div class="product_Content w" ref="detailInfo">
      <div class="content_left">
        <div class="product_box flex">
          <i class="iconfont icon-chanpin"></i>
          <span class="product_title">产品详情</span>
        </div>
        <div class="mt-30 mb-8">
          <div>
            <h2 class="basicTitle">基本参数</h2>
          </div>
          <div class="solid"></div>
        </div>
        <div class="details">
          <div class="basic_details">
            <p class="font">{{detail.productParam}}</p>
          </div>
        </div>
        <div class="detailIntro">
          <h2>详细说明</h2>
          <div class="solid"></div>
        </div>
        <div class="detailIntroduce">
          <p style="color:#828384" v-html="detail.productDetails">
          </p>
        </div>
        <!-- 荣誉资质 -->
        <div class="detailIntro">
          <h2>荣誉资质</h2>
          <div class="solid"></div>
        </div>
        <div class="hornor" v-if="hornorList.length>0">
          <div class="awards" v-for="(item,index) in hornorList" :key="index">
            <img :src="wengeGetImageUrl(item.fileUrl)" alt="" />
          </div>
        </div>
      </div>
      <!-- 产品推荐Start -->
      <div class="content_right">
        <div class="product_recom">产品推荐</div>
        <div class="mt-65" style="padding: 0 10px 0px 10px">
          <div class="img_box flex mt-15" v-for="(item,index) in RecommendProduct" :key="index" @click="updateProDetail(item.id)">
            <div class="image">
              <!-- <img src="@/assets/images/1.png" alt=""> -->
              <img v-if="item.productFile.length > 0" :src="wengeGetImageUrl(item.productFile[0].fileUrl)" alt="" />
              <img v-else class="product_img" src="@/assets/images/defult_img.png" alt />
            </div>
            <div>
              <p class="contentF row-ellipsis">{{ item.productName }}</p>
              <!-- <p class="contentS">¥{{ item.price }}</p> -->
              <p class="contentS" v-if="item.isInterview? 0:1 ">￥{{ item.price }}</p>
              <p class="contentS" v-else>面谈</p>
              <p class="contentT row-ellipsis">{{ item.productOneCategoryName? item.productOneCategoryName : '' }}-{{ item.productSecondCategoryName?item.productSecondCategoryName:'' }}</p>
            </div>

          </div>
          <div v-if="RecommendProduct.length<=0" style="text-align: center">暂无</div>
        </div>
      </div>
      <!-- 产品推荐End -->
    </div>
    <!-- 弹窗Start -->
    <a-modal wrapClassName="industrymode" title="采购联系信息" okText="提交" :closable="false" :visible="visible" :confirm-loading="confirmLoading" @ok="submit" @cancel="handleCancel" :bodyStyle="{color:''}">
      <p class="top_title" style="text-align:center">{{detail.productName}}</p>
      <!-- <div class="solid"></div> -->
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" class="mt-30">
        <a-form-item label="联系人">
          <a-input placeholder="请输入联系人" v-decorator="['contact', { rules: [{ required: true, message: '请输入联系人' }]}]" />
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input placeholder="请输入手机号码" v-decorator="['phone', 
          { rules: [{ required: true, message: '请输入手机号码' },{
            pattern:  /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确'
            }]}]" />
        </a-form-item>
        <!-- <a-form-item v-bind="formItemLayout" label="验证码">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-input placeholder="请输入验证码" v-decorator="['code',{ rules: [{ required: true, message: '请输入验证码' }] }]" />
            </a-col>
            <a-col :span="12">
              <a-button style="width:100%" :disabled="Isdisabled" @click="getCode" type="primary">
                {{sec == 0 ? '获取用户验证码' : '还有' + sec + '秒'}}
              </a-button>
            </a-col>
          </a-row>
        </a-form-item> -->
        <a-form-item label="邮箱">
          <a-input placeholder="请输入邮箱" v-decorator="['email',{ rules: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,message: '邮箱格式不正确'}]}]" />
        </a-form-item>
        <a-form-item label="附言">
          <a-input placeholder="请输入你的留言" type="textarea" v-decorator="['textarea']" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 弹窗End -->
  </div>
</template>

<script>
import countTo from "vue-count-to";
import { getToken, setIsSign } from "@/utils/auth";

import {
  getInfo,
  getList,
  getDetail,
  addWords,
  addAttention,
  updateAttention,
  getTongJ,
  getSimilarList,
} from "@/apis/productProvide";
import {
  getAttentionTotalByObjId,
  getIsAttentionEnt,
  getentBaseInfo,
} from "@/apis/EntBase";
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
import { getVerifiyCode } from "@/apis/user/Sign";
import breadcrumb from "@/components/breadcrumb/breadcrumb.vue";
import store from "@/store";
import { isLogin } from '@/utils';
export default {
  components: {
    countTo,
    breadcrumb,
  },
  data() {
    return {
      Isdisabled: false,
      isMyProduct: false, //默认不是
      EntZZSNum: 0, //关注数
      ISguanzhu: false, //是否关注
      detail: {},
      productPicture: [],
      hornorList: [],
      recommendPicture: [], //首页推荐图片
      currentIndex: 0,
      timer: "",
      startVal: 0,
      endVal: 0,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      formItemLayout: {
        labelCol: { sm: { span: 6 } },
        wrapperCol: { sm: { span: 14 } },
      },
      // 倒计时的秒数
      sec: 0,
      RecommendProduct: [], //产品推荐
      entList: {},
      baseList: {},
      currentEnt: {},
      senTextList: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getProductInfo(this.id);
    this.getProductPicture(this.id);
    this.getAttentionTotalByObjId();
    this.getSimilarList();
    if (isLogin()) {
      this.getIsAttentionEnt();
    }
    this.getTongJ();
    let senText = require('../../../../assets/other/Sensitive-word.txt')
    this.senTextList = senText.default.split(/\n/)
  },
  mounted() {
    this.getRouterData()
  },
  methods: {
    // 获取路由参数（锚点跳转）
    getRouterData() {
      let { anchor } = this.$route.query
      if(anchor && anchor !== '') {
        this.$refs[anchor].scrollIntoView()
      }
    },
    getTongJ() {
      getTongJ().then((res) => {
        if (res.code == 200) {
          this.endVal = res.data.productInfoCount;
        }
      });
    },
    getEntBaseInfo() {
      getEntBaseInfo().then((res) => {
        if (res.code == 200) {
          this.currentEnt = res.data;
          if (this.currentEnt.id == this.detail.entId) {
            this.isMyProduct = true;
          } else {
            this.isMyProduct = false;
          }
        }
      });
    },
    // 获取企业的关注数
    getAttentionTotalByObjId() {
      getAttentionTotalByObjId(this.id)
        .then((res) => {
          if (res.code == 200) {
            this.EntZZSNum = res.data;
          }
        })
        .catch((error) => {});
    },
    // 新增关注  取消关注
    async attentionEnt() {
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') != 1) {
        this.$store.commit('setIsSign',true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。")
      } else {
        if (this.ISguanzhu == false) {
          let _params = {
            objectId: this.id,
            objectType: 2,
          };
          addAttention(_params)
            .then((res) => {
              if (res.code == 200) {
                this.getAttentionTotalByObjId();
                this.$message.success("关注成功");
                this.ISguanzhu = true;
              }
            })
            .catch((error) => {});
        } else {
          let _params = {
            objectId: this.id,
            objectType: 2,
            operatorType: 1,
          };
          console.log(1);
          console.log(_params);
          updateAttention(_params)
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.getAttentionTotalByObjId();
                this.$message.success("取关成功");
                this.ISguanzhu = false;
              }
            })
            .catch((error) => {});
        }
      }
    },
    async Myneed() {
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') != 1) {
        this.$store.commit('setIsSign',true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。")
      } else {
        this.$router.push("/usercenter/RequirementRelease");
      }
    },
    async Myproduct() {
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') != 1) {
        this.$store.commit('setIsSign',true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。")
      } else {
        this.$router.push("usercenter/ProductsRelease");
      }
    },
    // 获取已关注数
    getIsAttentionEnt() {
      getIsAttentionEnt(this.id)
        .then((res) => {
          this.ISguanzhu = res.data;
        })
        .catch((error) => {});
    },
    // 获取产品详情
    getProductInfo(id) {
      let params = { id };
      getInfo(params).then((res) => {
        if ((res.code = 200)) {
          this.detail = res.data;
          //取当前登录企业信息
          if (isLogin()) {
            this.getEntBaseInfo();
          }
          //取供应的企业信息
          this.getentBaseInfo(res.data.entId);
        }
      });
    },
    getentBaseInfo(id) {
      getentBaseInfo(id).then((res) => {
        if ((res.code = 200)) {
          this.entList = res.data;
        }
      });
    },
    // 获取产品图片
    getProductPicture(id) {
      let params = { id };
      getDetail(params).then((res) => {
        if ((res.code = 200)) {
          this.hornorList = res.data.honorFile;
          this.productPicture = res.data.productFile;
        }
      });
    },
    //相似产品
    getSimilarList() {
      let params = {
        fromProductId: this.id,
        ntotal: 3,
      };
      getSimilarList(params).then((res) => {
        if (res.code == 200) {
          let arr = res.data;
          for (let i = 0; i < arr.length; i++) {
            if (i < 3) {
              this.RecommendProduct.push(arr[i]);
            }
          }
        }
      });
    },
    // 产品推荐
    // getProductRecommend(){
    //   let params = { 	ntotal: 0 }
    //   getRandomOnlineRecommendationList(params).then(res=>{
    //     if(res.code=200){
    //       let arr = []
    //       arr = res.data
    //       for(let i = 0;i<arr.length;i++){
    //         if(i<3){
    //           this.RecommendProduct.push(arr[i])
    //         }
    //       }
    //     }
    //   })
    // },
    // 点击产品推荐进行页面更新
    updateProDetail(id) {
      // let url = `/ProductContent?id=${id}`;
      // window.location.href = url;
      
      // this.$router.push({
      //   path: "/ProductContent",
      //   query: { id },
      // });
       let routeUrl = this.$router.resolve({
            path: "/ProductContent",
            query: { id },
       });
       window.open(routeUrl.href, "_blank");
      
    },
    stop() {
      clearInterval(this.timer);
      this.timer = null;
    },
    change(index) {
      this.currentIndex = index;
    },
    lastPicture(index) {
      if (index == -1) {
        this.currentIndex = this.productPicture.length - 1;
      } else {
        this.currentIndex = index;
      }
    },
    nextPicture(index) {
      if (index == this.productPicture.length) {
        this.currentIndex = 0;
      } else {
        this.currentIndex = index;
      }
    },
    // 采购
    async toProcure() {
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') != 1) {
        this.$store.commit('setIsSign',true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。")
      } else {
        this.visible = true;
      }
    },
    //获取验证码
    getCode() {
      //只校验手机号字段,校验通过才发送短信
      this.form.validateFields(["phone"], (err, values) => {
        if (!err) {
          let params = {
            mobile: values.phone,
            type: 2,
          };
          this.Isdisabled = true;
          const timeout = 60;
          getVerifiyCode(params).then((res) => {
            if (res.code === 200) {
              this.$message.success("短信发送成功,注意查收!");
              this.sec = timeout;
              // 写一个每隔一秒触发的计时器,避免小于0
              let timerID = setInterval(() => {
                if (this.sec > 0 && this.sec <= timeout) {
                  this.sec--;
                } else {
                  this.sec = 0;
                  this.Isdisabled = false;
                  clearInterval(timerID);
                }
              }, 1000);
            }else{
              this.$message.error(res.msg);
              this.IsDisabled = false;
            }
          });
        }
      });
    },
    //提交按钮
    submit(e) {
      e.preventDefault();
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let isSubmit = true
          if(values.textarea){
            for(let i = 0; i < this.senTextList.length; i++) {
              if(values.textarea.includes(this.senTextList[i])) {
                console.log(values.textarea, this.senTextList[i])
                this.$message.warning("您的附言中存在涉黄、涉黑等词汇请修改后再次提交！！！")
                isSubmit = false
                break
              }
            }
          }
          if(isSubmit) {
            setTimeout(() => {
              let contact = values.contact;
              let phone = values.phone;
              let verifyCode = values.code;
              let email = values.email;
              let postscript = values.textarea;
              this.addMessage(contact, phone, email, postscript, verifyCode);
            }, 1000);
          }else {
            this.confirmLoading = false
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    addMessage(contact, phone, email, postscript, verifyCode) {
      let params = {
        objectType: 2,
        objectId: this.id,
        contact,
        phone,
        email,
        postscript,
        verifyCode,
      };
      addWords(params)
        .then((res) => {
          this.confirmLoading = false;
          if (res.code == 200) {
            this.visible = false;
            // 清空表单
            this.sec = 0;
            this.form.resetFields();
            this.$message.success("恭喜留言成功!");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          console.log();
        });
    },
    //取消按钮
    handleCancel(e) {
      this.form.resetFields();
      this.sec = 0;
      this.Isdisabled = false;
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.active {
  border: 1px solid #188af1;
}
.scroll_view_box {
  z-index: 0 !important;
  .icon1 {
    line-height: 60px;
    width: 31px;
    height: 31px;
    font-size: 25px;
    color: #eceff5;
    &:hover {
      color: #188af1;
    }
  }
  .lunbo {
    width: 60px;
    height: 60px;
    background-image: linear-gradient(90deg);
    border: solid 1px #ebeef5;
    margin: 0 6px;
    &:hover {
      border: solid 1px #188af1;
    }
  }
}

.carousel_wrap {
  position: relative;
  height: 453px;
  width: 100%;
  overflow: hidden;
  // 删除
  background-color: #fff;
  .slide-ul {
    width: 100%;
    height: 100%;
    li {
      position: absolute;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .carousel_items {
    position: absolute;
    z-index: 10;
    top: 380px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
    // white-space: nowrap;
    // overflow-x:auto;
    .active {
      border: 1px solid #188af1;
    }
  }
}
// 鼠标轮播图切换
.list-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

.list-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%);
}

.list-enter {
  transform: translateX(100%);
}

.list-leave {
  transform: translateX(0);
}

// 弹窗
::v-deep .ant-modal-content {
  left: -20%;
  width: 694px;
  // height: 580px;
  // text-align: center;
  border-radius: 32px;
  border: solid 6px #188af1;
}
::v-deep .ant-modal-header {
  height: 60px;
  background-color: #2a51bc;
  border-radius: 24px 24px 0px 0px;
  text-align: center;
}

::v-deep .ant-modal-title {
  color: #fff;
  font-size: @font26;
}
::v-deep .ant-modal-footer {
  margin: 0 24px;
}
.industrymode {
  .top_title {
    font-family: Microsoft YaHei;
    font-size: 22px;
    letter-spacing: 0px;
    color: #303133;
    border-bottom: 1px solid #e4e7ed;
  }
}
.w {
  width: 1200px;
  margin: 0 auto;
}
// 轮播图样式

.ProductContent {
  background-color: #f5f7fa;
  .banner {
    width: 100%;
    height: 200px;
    background-position: center top;
    background-image: url(../../../../assets/images/productBanner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .banner_text {
      padding-top: 40px;
      width: 280px;
      height: 59px;
      font-family: Source Han Sans SC;
      font-size: 36px;
      line-height: 59px;
      color: #ffffff;
    }
    .banner_box {
      width: 300px;
      height: 61px;
      margin-top: 60px;
      background-image: linear-gradient(
        271deg,
        rgba(42, 81, 188, 0) 0%,
        rgba(42, 81, 188, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      .banner_box_num {
        width: 100px;
        height: 58px;
        padding-left: 61px;
        font-family: Arial;
        font-size: 54px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 58px;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
  }
  .nav-box {
    margin: 24px 0;
    height: 56px;
    background-color: #ffffff;
    box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
    border-radius: 6px;

    .nav-text {
      line-height: 56px;
      margin-left: 29px;
      font-size: @font16;
      font-weight: normal;
      color: @text-color-606;

      .nav-Detail {
        color: @color-188;
      }
    }
  }
  .mainBox {
    display: flex;
    justify-content: space-between;

    .leftBox {
      display: flex;
      width: 894px;
      margin-right: 24px;
      margin-bottom: 24px;
      background-color: #ffffff;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      padding: 32px;
      .leftMain {
        display: flex;
        flex-direction: column;
        margin: 10px;
        .img {
          width: 360px;
          height: 360px;
          background-color: #ffffff;
          border: solid 1px #e4e7ed;
          margin-right: 32px;
          background-position: center top;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .scroll_view_box {
          .icon1 {
            line-height: 60px;
            width: 31px;
            height: 31px;
            font-size: 25px;
            color: #eceff5;
            &:hover {
              color: #188af1;
            }
          }
          .lunbo {
            width: 60px;
            height: 60px;
            background-image: linear-gradient(90deg);
            border: solid 1px #ebeef5;
            margin: 0 6px;
            &:hover {
              border: solid 1px #188af1;
            }
          }
        }
      }
      .info {
        width: 418px;
        .info_son {
          //   border-bottom: 1px solid #EBEEF5;
          padding-bottom: 12px;
        }
        .provide {
          font-family: Microsoft YaHei;
          font-size: 22px;
          color: #303133;
        }
        .price {
          width: 418px;
          height: 51px;
          background-color: #ebeef5;
          border-radius: 8px;
          vertical-align: middle;
          .price_one {
            vertical-align: middle;
            margin-left: 20px;
            width: 67px;
            height: 19px;
            font-family: Microsoft YaHei;
            font-size: 14px;
            line-height: 28px;
            color: #909399;
          }
          .price_two {
            vertical-align: middle;
            font-family: Microsoft YaHei;
            font-size: 26px;
            color: #e9284f;
            line-height: 51px;
          }
        }
        .titleList {
          margin-top: 21px;
          .titleLabel {
            color: #909399;
          }
        }
        .btnArr {
          margin: 20px 0 20px 0;
          .machine {
            padding: 0 15px;
            display: inline-block;
            text-align: center;
            height: 24px;
            font: 14px/1 #0da9b0;
            margin-right: 20px;
            background-color: #ffffff;
            border-radius: 12px;
            border: solid 1px #0da9b0;
          }
        }
        .btn_list {
          vertical-align: middle;
          display: flex;
          justify-content: space-between;
          // margin-top: 31px;
          .btn {
            width: 146px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            background-color: #ff9f00;
            border-radius: 4px;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            &:hover {
              background-color: #ffb53a;
            }
          }
          .scroll_view_right {
            cursor: pointer;
            margin-top: 15px;
            .attention {
              font-family: Microsoft YaHei;
              font-size: 16px;
              color: #188af1;
              font-weight: bold;
              line-height: 48px;
              vertical-align: middle;
              margin-right: 78px;
              margin-left: 11px;
            }
          }
        }
      }
      .productsContent {
        margin-top: 20px;
        width: 894px;
        height: 1154px;
        background-color: #ffffff;
        border: 1px solid #333333;
        border-radius: 8px;
      }
    }
    .main-right {
      width: 282px;
      .right-top {
        background-color: #fff;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 360px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        .expire {
          text-align: center;
          position: absolute;
          width: 100%;
          top: -100px;
          height: 148px;
          line-height: 248px;
          border-radius: 30%;
          background-color: @color-2A5;
          font-size: @font18;
          color: #fff;
        }
        .company {
          margin: 64px 19px 8px;
          div {
            &:nth-child(1) {
              margin-top: 15px;
              width: 160px;
              font-size: @font16;
              color: @text-color-303;
              font-weight: 700;
            }
          }
        }
        .CompanyInformation {
          border-top: solid 1px #ebeef5;
          margin: 0 19px;
          padding-top: 17px;
          ul {
            li {
              font-size: @font14;
              color: @text-color-909;
              span {
                color: @text-color-606;
              }
            }
          }
        }
      }
      .ant-btn {
        margin-top: 25px;
        height: 48px;
        font-size: @font18;
        border: 0;
        &:nth-child(3) {
          background-color: #0da9b0;
          margin-bottom: 25px;
        }
      }
    }
  }
  .product_Content {
    display: flex;
    .content_left {
      width: 894px;
      // height: 1154px;
      padding: 24px;
      margin-right: 24px;
      margin-bottom: 50px;
      background-color: #ffffff;
      border-radius: 8px;
      .product_box {
        width: 846px;
        padding-bottom: 19px;
        border-bottom: solid 1px #ebeef5;
        .iconfont {
          width: 21px;
          height: 24px;
          color: #2a51bc;
          margin-right: 5px;
        }
        .product_title {
          font-family: Microsoft YaHei;
          font-size: 18px;
          color: #303133;
        }
      }
      .basicTitle {
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #303133;
        font-weight: bold;
      }
      .solid {
        width: 20px;
        height: 4px;
        background-color: #188af1;
        margin-top: 8px;
      }
      .details {
        width: 846px;
        // height: 76px;
        background-color: #f5f7fa;
        border-radius: 4px;
        .basic_details {
          width: 778px;
          // height: 45px;
          padding: 15px 46px 16px 22px;
          .font {
            font-family: Microsoft YaHei;
            font-size: 14px;
            line-height: 26px;
            letter-spacing: 0px;
            color: #606266;
          }
        }
      }
      .detailIntro {
        margin-top: 20px;
        width: 841px;
        border-bottom: solid 1px #ebeef5;
        h2 {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .detailIntroduce {
        margin-top: 31px;
        width: 842px;
      }
      .detail_img {
        img {
          width: 360px;
          height: 360px;
          background-position: center top;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .hornor {
        width: 816px;
        // height: 253px;
        margin-top: 35px;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        .awards {
          // width: 100%;
          height: 253px;
          display: flex;
          flex-wrap: wrap;
          // flex-direction: column;
          // text-align: center;
          img {
            // flex: 1;
            // width: 100%;
            max-height: 253px;
            // background-position: center top;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            transition: all 0.8s;
            -ms-transition: all 0.8s;
            padding-bottom: 17px;
            &:hover {
              transform: scale(1.1);
              -ms-transform: scale(1.1);
            }
          }
          // .solid{
          //   width: 260px;
          //   height: 0px;
          //   border: solid 1px #ebeef5;
          // }

          &:nth-child(2n) {
            margin: 0 30px;
          }
          p {
            margin-top: 18px;
          }
        }
      }
    }
    .content_right {
      width: 100%;
      height: 340px;
      background-color: #ffffff;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      .product_recom {
        position: absolute;
        width: 282px;
        height: 48px;
        text-align: center;
        width: 100%;
        top: -100px;
        height: 148px;
        line-height: 248px;
        border-radius: 30%;
        background-color: @color-2A5;
        font-size: @font18;
        color: #fff;
      }
      .img_box {
        cursor: pointer;
        width: 261px;
        :hover {
          color: #188af1;
        }
        .image {
          margin-right: 8px;
          width: 104px;
          height: 73px;
          display: flex;
          justify-content: center;
          align-content: center;
          border: 1px solid #e4e7ed;
          border-radius: 4px;
          overflow: hidden;
          img {
            width: auto;
            max-height: 73px;
          }
        }
        .contentF {
          font-family: Microsoft YaHei;
          font-size: 16px;
          width: 149px;
        }
        .contentS {
          font-family: Microsoft YaHei;
          font-size: 18px;
          color: #ee6224;
        }
        .contentT {
          font-family: Microsoft YaHei;
          font-size: 14px;
          color: #909399;
          width: 149px;
        }
      }
    }
  }
}
</style>